<template>
  <Tree ref="tree" :data="treeData" @on-select-change="onSelectChange" />
</template>

<script>
import mixin from "./mixin";
export default {
  mixins: [mixin],
  methods: {
    onSelectChange(eventArgs) {
      eventArgs[0] && this.$emit("change", eventArgs[0]);
    },
  },
  computed: {
    treeData() {
      return this.config.pages.map((p) => {
        return {
          ...p,
          title: `${p.title}(${p.name})`,
          expand: true,
          children: p.children.map((cp) => {
            return {
              ...cp,
              title: `${cp.title}(${cp.name})`,
            };
          }),
        };
      });
    },
  },
};
</script>
